<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <!--        轮播图-->

        <view class="swipers">
            <u-swiper :height="350" borderRadius="0" :list="goodsInfo.images" indicator-pos="bottomRight" mode="number" :interval="3000"></u-swiper>
        </view>
<!--        <view class="u-flex u-flex-col u-p-20 kehu-item">-->
<!--            <view class="u-flex u-col-center u-row-left u-w-100s">-->
<!--                <u-icon name="volume-fill" color="#fff" size="34"></u-icon>-->
<!--                <view class="u-m-l-14 u-ellipsis-1" style="font-size: 26rpx ;color:#fff">-->
<!--                    客户存客户存量客户存量客户存量客户存量客户存量客户存量量-->
<!--                </view>-->
<!--            </view>-->
<!--        </view>-->
        <u-notice-bar mode="horizontal" :list="list"></u-notice-bar>
        <view class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <!--            我的工作台-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 yuangong-item">
                <view class="u-flex u-col-center u-row-left u-w-100s u-h-100">
                    <image class="u-m-r-10" style="width: 40rpx;height: 20rpx;" src="/static/images/biaoshi.png"></image>
                    <view class="u-m-l-14" style="font-size: 24rpx">我的工作台</view>
                </view>
                <view class="u-flex u-p-10 u-w-100s top-yuangong u-p-b-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/kehu/zuzhichengyuan')" v-if="userInfo&&userInfo.group_id=='2'">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/zuzhi.png"></image>
                        </view>
                        <view class="topname">组织管理</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/kehu/mykehu')">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/kehu.png"></image>
                        </view>
                        <view class="topname">我的客户</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/kehu/shouhuanguanli')">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/kehu.png"></image>
                        </view>
                        <view class="topname">手环管理</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/kehu/shouhuanguanliDatail')">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/kehu.png"></image>
                        </view>
                        <view class="topname">手环管理详情</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/kehu/teacherTask')">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/kehu.png"></image>
                        </view>
                        <view class="topname">老师任务</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/user/teacherInfo')">
                        <view class="topnum">
                            <image style="width: 100rpx;height: 100rpx;" src="/static/images/icons/kehu.png"></image>
                        </view>
                        <view class="topname">老师信息</view>
                    </view>
                </view>
            </view>

            <!--            我的服务-->
            <view class="u-flex u-flex-col u-p-20 u-m-t-40 baobiao-item">
                <view class="u-flex u-col-center u-row-between u-w-100s u-h-100">
                    <view class="u-flex u-col-center u-row-left">
                        <image class="u-m-r-10" style="width: 40rpx;height: 20rpx;" src="/static/images/biaoshi.png"></image>
                        <view class="u-m-l-14" style="font-size: 24rpx">我的服务</view>
                    </view>
                </view>
                <view class="u-flex u-p-10 u-w-100s top-yuangong u-p-b-20">
                    <view class="u-flex u-flex-col u-row-left u-col-center list" @click="jump('/pages/public/heyan')">
                        <view class="topnum">
                            <image style="width: 80rpx;height: 80rpx;" src="/static/images/icons/yixingshi.png"></image>
                        </view>
                        <view class="topname">证件验证</view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>

import {mapMutations, mapActions, mapState, mapGetters} from 'vuex';

export default {
    components: {},
    data() {
        return {
            goodsInfo: {
                images: [require('@/static/images/lunbo1.jpg'), require('@/static/images/lunbo2.jpg')]

            },
            list:['客户存客户存量客户存量客户存量客户存量客户存量客户存量量']
        };
    },
    computed: {
        ...mapGetters(['isLogin','userInfo']),

    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad() {
    },
    methods: {
        // 初始化
        init() {

        },
        denglu() {
            this.$store.dispatch("showAuthModal", "1233");
        },
        // 路由跳转
        jump(path, parmas) {
            this.$Router.push({
                path : path,
                query: parmas
            });
        },
    }
};
</script>

<style lang="scss" scoped>
page {
    background: #f8f8f8;
}

.swipers {
    width: 100%;
}

.kehu-item {
    border-radius: 0rpx;
    background: #87CEFA;

    .top-kehu {
        background: #FFFFFF;
        border-radius: 20rpx;

        .topnum {
            font-size: 30rpx;
            margin-bottom: 10rpx;
        }

        .topname {
            font-size: 24rpx;
        }
    }
}

.yuangong-item {
    background: #FFFFFF;
    border-radius: 20rpx;
}

.baobiao-item {
    .time-day {
        width: 100rpx;
        background: #1989fa;
        color: #fff;
        padding: 6rpx 8rpx;
    }

    .time-month {
        width: 100rpx;
        background: #fff;
        border-radius: 10rpx;
        color: #1989fa;
        padding: 6rpx 8rpx;
    }
}

.top-yuangong {
    flex-wrap: wrap;
}

.top-yuangong > .list {
    width: 24%;
}

.top-yuangong > .list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}
</style>
